<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电视形状视频播放器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .video-container {
            background-color: #333;
            border-radius: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            max-width: 900px;
            width: 100%;
            padding: 20px;
            position: relative;
            text-align: center;
        }
        .video-container::before, .video-container::after {
            content: '';
            position: absolute;
            top: -30px;
            width: 50px;
            height: 30px;
            background-color: #333;
            border-radius: 15px 15px 0 0;
        }
        .video-container::before {
            left: 30%;
        }
        .video-container::after {
            right: 30%;
        }
        .video-title {
            font-size: 24px;
            color: white;
            margin-bottom: 10px;
        }
        video {
            width: 100%;
            height: 400px;
            border-radius: 10px;
        }
        .video-description {
            font-size: 16px;
            color: #ccc;
            margin-top: 10px;
        }
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .controls button {
            background-color: #555;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 0 5px;
            cursor: pointer;
            border-radius: 5px;
        }
        .controls button:hover {
            background-color: #777;
        }
        .progress-container {
            width: 100%;
            background-color: #444;
            border-radius: 5px;
            margin-top: 10px;
            overflow: hidden;
        }
        .progress-bar {
            width: 0;
            height: 10px;
            background-color: #76c7c0;
        }
        .tv-bottom {
            background-color: #333;
            height: 30px;
            width: 50%;
            position: absolute;
            bottom: -30px;
            left: 25%;
            border-radius: 0 0 10px 10px;
        }
        /* 为body元素设置样式 */  
body {  
    font-family: Arial, sans-serif; /* 使用Arial字体，如果找不到则使用无衬线字体 */  
    margin: 0; /* 外边距为0 */  
    padding: 0; /* 内边距为0 */  
    background-color: #f7f7f7; /* 背景颜色为浅灰色 */  
    display: flex; /* 使用弹性布局 */  
    justify-content: center; /* 水平居中子元素 */  
    align-items: center; /* 垂直居中子元素 */  
    height: 100vh; /* 高度设置为视口的100% */  
}  
  
/* 为.video-container元素设置样式，该元素可能是一个包含视频的容器 */  
.video-container {  
    background-color: #333; /* 背景颜色为深灰色 */  
    border-radius: 20px; /* 边框圆角为20px */  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */  
    max-width: 900px; /* 最大宽度为900px */  
    width: 100%; /* 宽度为容器的100% */  
    padding: 20px; /* 内边距为20px */  
    position: relative; /* 使用相对定位 */  
    text-align: center; /* 文本居中对齐 */  
}  
  
/* 使用伪元素为.video-container添加装饰性的“阴影”或“边框”效果 */  
.video-container::before, .video-container::after {  
    content: ''; /* 伪元素的内容为空 */  
    position: absolute; /* 使用绝对定位 */  
    top: -30px; /* 距离容器顶部-30px */  
    width: 50px; /* 宽度为50px */  
    height: 30px; /* 高度为30px */  
    background-color: #333; /* 背景颜色为深灰色 */  
    border-radius: 15px 15px 0 0; /* 顶部两个角为圆角，底部两个角为直角 */  
}  
  
/* 设置.video-container的::before伪元素的定位 */  
.video-container::before {  
    left: 30%; /* 距离容器左侧30% */  
}  
  
/* 设置.video-container的::after伪元素的定位 */  
.video-container::after {  
    right: 30%; /* 距离容器右侧30% */  
}  
  
/* 为.video-title元素设置样式，可能是视频的标题 */  
.video-title {  
    font-size: 24px; /* 字体大小为24px */  
    color: white; /* 字体颜色为白色 */  
    margin-bottom: 10px; /* 下外边距为10px */  
}  
  
/* 为video元素设置样式 */  
video {  
    width: 100%; /* 宽度为容器的100% */  
    height: 400px; /* 高度为400px */  
    border-radius: 10px; /* 边框圆角为10px */  
}  
  
/* 为.video-description元素设置样式，可能是视频的描述 */  
.video-description {  
    font-size: 16px; /* 字体大小为16px */  
    color: #ccc; /* 字体颜色为浅灰色 */  
    margin-top: 10px; /* 上外边距为10px */  
}  
  
/* 为.controls元素设置样式，可能是视频的控制按钮组 */  
.controls {  
    display: flex; /* 使用弹性布局 */  
    justify-content: center; /* 水平居中子元素 */  
    margin-top: 10px; /* 上外边距为10px */  
}  
  
/* 为.controls中的button元素设置样式 */  
.controls button {  
    background-color: #555; /* 背景颜色为深灰色 */  
    color: white; /* 字体颜色为白色 */  
    border: none; /* 无边框 */  
    padding: 10px 20px; /* 内边距为10px 20px */  
    margin: 0 5px; /* 外边距为0 5px */  
    cursor: pointer; /* 鼠标指针为手形 */  
    border-radius: 5px; /* 边框圆角为5px */  
}  
  
/* 为.controls中的button元素设置鼠标悬停时的样式 */  
.controls button:hover {  
    background-color: #777; /* 背景颜色变浅 */  
}  
  
/* 为.progress-container元素设置样式，可能是视频的进度条容器 */  
.progress-container {  
    width: 100%; /* 宽度为容器的100% */  
    background-color: #444; /* 背景颜色为深灰色 */  
    border-radius: 5px; /* 边框圆角为5px */  
    margin-top: 10px; /* 上外边距为10px */  
    overflow: hidden; /* 隐藏超出容器的内容 */  
}  
  
/* 为.progress-bar元素设置样式，可能是视频的当前播放进度条 */  
.progress-bar {  
    width: 0; /* 初始宽度为0 */  
    height: 10px; /* 高度为10px */  
    background-color: #76c7c0; /* 背景颜色为蓝绿色 */  
}  
  
/* 为.tv-bottom元素设置样式，可能是模拟电视底部的样式 */  
.tv-bottom {  
    background-color: #333; /* 背景颜色为深灰色 */  
    height: 30px; /* 高度为30px */  
    width: 50%; /* 宽度为容器的50% */  
    position: absolute; /* 使用绝对定位 */  
    bottom: -30px; /* 距离容器底部-30px */  
    left: 25%; /* 距离容器左侧25% */  
    border-radius: 0 0 10px 10px; /* 底部两个角为圆角，顶部两个角为直角 */  
}
    </style>
</head>
<body>
    <div class="video-container">
        <div class="video-title">大黄冲浪</div>
        <video id="videoPlayer">
            <source src="视频1.mp4" type="video/mp4">
            您的浏览器不支持HTML5视频标签。
        </video>
        <div class="video-description">我家独特的高考祝福</div>
        <div class="controls">
            <button onclick="playVideo()">播放</button>
            <button onclick="pauseVideo()">暂停</button>
            <button onclick="toggleFullScreen()">全屏</button>
        </div>
        <div class="progress-container">
            <div class="progress-bar" id="progressBar"></div>
        </div>
        <div class="tv-bottom">Hisense</div>
    </div>

    <script>
        const video = document.getElementById('videoPlayer');
        const progressBar = document.getElementById('progressBar');

        function playVideo() {
            video.play();
        }

        function pauseVideo() {
            video.pause();
        }

        video.addEventListener('timeupdate', updateProgress);

        function updateProgress() {
            const percentage = (video.currentTime / video.duration) * 100;
            progressBar.style.width = percentage + '%';
        }

        function toggleFullScreen() {
            if (!document.fullscreenElement) {
                video.requestFullscreen().catch(err => {
                    alert(`全屏模式失败: ${err.message} (${err.name})`);
                });
            } else {
                document.exitFullscreen();
            }
        }
    </script>
</body>
</html>
